<template>
  <div>
    <div class="demo-inner-divider">基础标签页</div>
    <div class="demo-inner-desc">
      使用选项卡切换内容模块，操作后不会进行页面跳转
    </div>
    <div style="margin-bottom: 50px">
      <e-tabs>
        <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
        <e-tab-pane label="标签二" disabled>
          标签二的内容
        </e-tab-pane>
        <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
      </e-tabs>
    </div>


    <div class="demo-inner-divider">带图标的标签页</div>
    <div style="margin-bottom: 50px">
      <e-tabs>
        <e-tab-pane label="macOS" icon="folder">
          标签一的内容
        </e-tab-pane>
        <e-tab-pane label="Windows" icon="folder">
          标签二的内容
        </e-tab-pane>
        <e-tab-pane label="Linux" icon="folder">
          标签三的内容
        </e-tab-pane>
      </e-tabs>
    </div>


    <div class="demo-inner-divider">可滑动标签页</div>
    <div class="demo-inner-desc">
      当选项卡数量超出最大宽度，可通过滑动展示选项卡,点击三点icon显示下拉框,下拉选项式标签页
    </div>
    <div style="margin-bottom: 50px; width: 400px">
      <e-tabs showMore>
        <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
        <e-tab-pane label="标签二">标签二的内容</e-tab-pane>
        <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
        <e-tab-pane label="标签4">标签4的内容</e-tab-pane>
        <e-tab-pane label="标签5">标签5的内容</e-tab-pane>
        <e-tab-pane label="标签6">标签6的内容</e-tab-pane>
        <e-tab-pane label="标签7">标签7的内容</e-tab-pane>
        <e-tab-pane label="标签8">标签8的内容</e-tab-pane>
        <e-tab-pane label="不可选项" disabled>标签9的内容</e-tab-pane>
      </e-tabs>
    </div>

    <div class="demo-inner-desc">
      当选项卡数量超出最大宽度，可通过左右箭头进行切换
      <div style="margin-bottom: 50px; width: 400px">
        <e-tabs showArrow>
          <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
          <e-tab-pane label="标签二">标签二的内容</e-tab-pane>
          <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
          <e-tab-pane label="标签4">标签4的内容</e-tab-pane>
          <e-tab-pane label="标签5">标签5的内容</e-tab-pane>
          <e-tab-pane label="标签6">标签6的内容</e-tab-pane>
          <e-tab-pane label="标签7">标签7的内容</e-tab-pane>
          <e-tab-pane label="标签8">标签8的内容</e-tab-pane>
          <e-tab-pane label="不可选项" disabled>标签9的内容</e-tab-pane>
        </e-tabs>
      </div>
    </div>


    <div class="demo-inner-divider">垂直标签页</div>
    <div class="demo-inner-desc">
      1、文案右对齐
    </div>
    <div style="margin-bottom: 50px">
      <e-tabs
        tab-position="vertical"
        :animated="false"
        text-right
      >
        <e-tab-pane label="选中">标签一选中的内容</e-tab-pane>
        <e-tab-pane label="可选项">标签二可选项的内容</e-tab-pane>
        <e-tab-pane
          label="不可选项"
          disabled
        >
          标签三不可选项的内容
        </e-tab-pane>
      </e-tabs>
    </div>

    <div class="demo-inner-desc">
      2、文案左对齐
    </div>
    <div style="margin-bottom: 50px">
      <e-tabs tab-position="vertical">
        <e-tab-pane label="选中">标签一选中的内容</e-tab-pane>
        <e-tab-pane label="可选项">标签二可选项的内容</e-tab-pane>
        <e-tab-pane
          label="不可选项"
          disabled
        >
          标签三不可选项的内容
        </e-tab-pane>
      </e-tabs>
    </div>


    <div class="demo-inner-divider">卡片式标签页</div>
    <div class="demo-inner-desc">
      1、普通
    </div>
    <div style="margin-bottom: 50px">
      <e-tabs type="card">
        <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
        <e-tab-pane label="标签二" disabled>
          标签二的内容
        </e-tab-pane>
        <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
      </e-tabs>
    </div>

    <div class="demo-inner-desc">
      2、选项过多隐藏，可滑动
    </div>
    <div style="margin-bottom: 50px; width: 400px">
      <e-tabs
        type="card"
        show-more
      >
        <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
        <e-tab-pane label="标签二">标签二的内容</e-tab-pane>
        <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
        <e-tab-pane label="标签4">标签4的内容</e-tab-pane>
        <e-tab-pane label="标签5">标签5的内容</e-tab-pane>
        <e-tab-pane label="标签6">标签6的内容</e-tab-pane>
        <e-tab-pane label="不可选项" disabled>标签7的内容</e-tab-pane>
        <e-tab-pane label="标签8">标签8的内容</e-tab-pane>
        <e-tab-pane label="标签9">标签9的内容</e-tab-pane>
      </e-tabs>
    </div>

    <div class="demo-inner-desc">
      3、可添加、关闭tab
    </div>
    <div style="margin-bottom: 50px" class="demo-card-add">
      <e-tabs
        type="card"
        @on-tab-remove="removeTab"
        closable
      >
        <template #extra>
          <span
            class="add-btn"
            @click="addTab"
          >
            <e-icon type="add"></e-icon>
          </span>
        </template>
        <e-tab-pane
          v-for="(item, index) in tabList"
          :key="index"
          :label="item.label"
          :name="item.name"
          :disabled="item.disabled"
          :index="index"
        >
          {{ item.label }}内容
        </e-tab-pane>
      </e-tabs>
    </div>

    <div class="demo-inner-desc">
      4、选项过多隐藏，可滑动，可添加、关闭tab
    </div>
    <div style="margin-bottom: 50px" class="demo-card-add-more">
      <e-tabs
        type="card"
        @on-tab-remove="removeTab1"
        closable
        show-more
      >
        <template #extra>
          <span
            class="add-btn"
            @click="addTab1"
          >
            <e-icon type="add"></e-icon>
          </span>
        </template>
        <e-tab-pane
          v-for="(item, index) in tabList1"
          :key="index"
          :label="item.label"
          :name="item.name"
          :disabled="item.disabled"
          :index="index"
        >
          {{ item.label }}内容
        </e-tab-pane>
      </e-tabs>
    </div>

    <div class="demo-inner-divider">容器式选项卡</div>
    <div class="demo-inner-desc">
      1、普通
    </div>
    <div style="margin-bottom: 50px; width: 500px">
      <e-tabs
        type="container"
        :animated="false"
      >
        <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
        <e-tab-pane label="标签二" disabled>
          标签二的内容
        </e-tab-pane>
        <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
        <e-tab-pane label="标签四">标签四的内容</e-tab-pane>
        <!-- <e-tab-pane label="标签五">标签五的内容</e-tab-pane>
        <e-tab-pane label="标签六">标签六的内容</e-tab-pane> -->
      </e-tabs>
    </div>

    <div class="demo-inner-desc">
      2、可添加、关闭tab容器
    </div>
    <div style="margin-bottom: 50px" class="demo-container-add">
      <e-tabs
        type="container"
        :animated="false"
        @on-tab-remove="removeTab2"
        closable
      >
        <template #extra>
          <span
            class="add-btn"
            @click="addTab2"
          >
            <e-icon type="add" size="14"></e-icon>
          </span>
        </template>
        <e-tab-pane
          v-for="(item, index) in tabList2"
          :key="index"
          :label="item.label"
          :name="item.name"
          :disabled="item.disabled"
          :index="index"
        >
          {{ item.label }}内容
        </e-tab-pane>
      </e-tabs>
    </div>

    <div class="demo-inner-desc">
      3、选项过多隐藏，可滑动，可添加、关闭tab容器
    </div>
    <div style="margin-bottom: 50px" class="demo-container-add-more">
      <e-tabs
        type="container"
        :animated="false"
        @on-tab-remove="removeTab3"
        closable
        show-more
      >
        <template #extra>
          <span
            class="add-btn"
            @click="addTab3"
          >
            <e-icon type="add" size="14"></e-icon>
          </span>
        </template>
        <e-tab-pane
          v-for="(item, index) in tabList3"
          :key="index"
          :label="item.label"
          :name="item.name"
          :disabled="item.disabled"
          :index="index"
        >
          {{ item.label }}内容
        </e-tab-pane>
      </e-tabs>
    </div>

    <tabs-md class="markdown-body"/>
    <!-- Example End -->
  </div>
</template>

<script>
import tabsMd from '../../docs/tabs.md';

export default {
  components: {
    tabsMd
  },
  data() {
    return {
      tabList: new Array(5).fill(0).map((_, index) => {
        if (index === 4) {
          return {
            label: '不可选项',
            name: `name${index}`,
            disabled: true
          }
        } else {
          return {
            label: `可选项${index}`,
            name: `name${index}`
          }
        }
      }),

      tabList1: new Array(5).fill(0).map((_, index) => {
        if (index === 4) {
          return {
            label: '不可选项',
            name: `name${index}`,
            disabled: true
          }
        } else {
          return {
            label: `可选项${index}`,
            name: `name${index}`
          }
        }
      }),

      tabList2: new Array(5).fill(0).map((_, index) => {
        if (index === 4) {
          return {
            label: '不可选项',
            name: `name${index}`,
            disabled: true
          }
        } else {
          return {
            label: `可选项${index}`,
            name: `name${index}`
          }
        }
      }),

      tabList3: new Array(5).fill(0).map((_, index) => {
        if (index === 4) {
          return {
            label: '不可选项',
            name: `name${index}`,
            disabled: true
          }
        } else {
          return {
            label: `可选项${index}`,
            name: `name${index}`
          }
        }
      }),
    }
  },
  methods: {
    addTab () {
      const lastIndex = this.tabList.slice(-1)[0].name.split('name')[1] - 0
      this.tabList.push({
        label: `可选项${lastIndex + 1}`,
        name: `name${lastIndex + 1}`
      })
    },

    removeTab (name) {
      let resultIndex = -1
      this.tabList.find((item, index) => {
        if (item.name === name) {
          resultIndex = index
        }
        return item.name === name
      })
      if (resultIndex === -1) {
        return
      }
      this.tabList.splice(resultIndex, 1)
    },

    addTab1 () {
      const lastIndex = this.tabList1.slice(-1)[0].name.split('name')[1] - 0
      this.tabList1.push({
        label: `可选项${lastIndex + 1}`,
        name: `name${lastIndex + 1}`
      })
    },

    removeTab1 (name) {
      let resultIndex = -1
      this.tabList1.find((item, index) => {
        if (item.name === name) {
          resultIndex = index
        }
        return item.name === name
      })
      if (resultIndex === -1) {
        return
      }
      this.tabList1.splice(resultIndex, 1)
    },

    addTab2 () {
      const lastIndex = this.tabList2.slice(-1)[0].name.split('name')[1] - 0
      this.tabList2.push({
        label: `可选项${lastIndex + 1}`,
        name: `name${lastIndex + 1}`
      })
    },

    removeTab2 (name) {
      let resultIndex = -1
      this.tabList2.find((item, index) => {
        if (item.name === name) {
          resultIndex = index
        }
        return item.name === name
      })
      if (resultIndex === -1) {
        return
      }
      this.tabList2.splice(resultIndex, 1)
    },

    addTab3 () {
      const lastIndex = this.tabList3.slice(-1)[0].name.split('name')[1] - 0
      this.tabList3.push({
        label: `可选项${lastIndex + 1}`,
        name: `name${lastIndex + 1}`
      })
    },

    removeTab3 (name) {
      let resultIndex = -1
      this.tabList3.find((item, index) => {
        if (item.name === name) {
          resultIndex = index
        }
        return item.name === name
      })
      if (resultIndex === -1) {
        return
      }
      this.tabList3.splice(resultIndex, 1)
    },
  },
}
</script>

<style scoped lang="less">
.demo-card-add {
  max-width: 1000px;
  display: inline-block;
}

.demo-card-add-more {
  max-width: 800px;
  display: inline-block;
}

.demo-card-add,
.demo-card-add-more {
  .add-btn {
    width: 40px;
    height: 40px;
    display: block;
    line-height: 36px;
    text-align: center;
    border: 1px solid #D9D9D9;
    border-bottom: 0;
    background: #f5f5f5;
    border-radius: 2px 2px 0 0;
    cursor: pointer;

    &:hover {
      color: #337DFF;
    }

    &::after {
      display: block;
      position: relative;
      width: 50px;
      height: 1px;
      top: 3px;
      left: -10px;
      background: #D9D9D9;
      content: '';
      z-index: 9;
    }
  }
}

.demo-container-add {
  width: 1000px;
  display: inline-block;
}

.demo-container-add-more {
  max-width: 800px;
  display: inline-block;
}

.demo-container-add,
.demo-container-add-more {
  .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    text-align: center;
    margin-top: 7px;
    cursor: pointer;

    &:hover{
      background-color: #fff;
    }
  }
}

// .dark-theme .demo-tab-card-more .add-btn {
//   background-color: #272727;
//   border-color: #454545;
// }
// .dark-theme .demo-tab-card-more .add-btn::after {
//  background-color: #454545;
// }
</style>
